<template>
  <div>
     <div ref="commandstats" style="height: 420px" />
    <ul class="list-group df fww crg10 jcsb">
      <li :key="item.province" v-for="item in state.data">
        <div class="download-province tac fw500">
          {{ item.province }}
        </div>
        <div  style="height:calc(100% - 60px)"  class="df aic tac jcc fs28 c-1989fa">{{  item.companyCnt}}</div>
      </li>
     
      <li v-for="i in 10" :key="i + 'sdfg'" class="h0"></li>
    </ul>
  </div>
</template>
<script setup>
import { reactive,onMounted ,ref} from "vue";
import {getCompanyStatistics} from '@/api/uploadFile'
import * as echarts from 'echarts';
const commandstats = ref(null);

const state = reactive({
  data: [{ id: 2, province: "江苏省" }],
  columns: [],
});
onMounted(()=>{
    getCompanyStatistics({}).then((res)=>{
        state.data = res.data;
    getList()
    })
})
function getList() {
    console.log(commandstats.value)
u
    const commandstatsIntance = echarts.init(commandstats.value, "macarons");
    commandstatsIntance.setOption(
       {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
}
    );

}
</script>
<style scoped>
li:not(.h0) {
  width: 20%;
  background: #e4e4e4;
  min-height: 200px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.crg10 {
  row-gap: 10px;
  column-gap: 10px;
}
.h0 {
  height: 0;
  width: 200px;
  min-height: 0;
}
.download-province{
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}
</style>